import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp2/util/screen_util.dart';
import 'package:flutterapp2/extension/extension.dart';

class ExpertHomePage extends StatefulWidget {
  @override
  _ExpertHomePageState createState() => _ExpertHomePageState();
}

class _ExpertHomePageState extends State<ExpertHomePage> with SingleTickerProviderStateMixin {
  ScrollController _scrollController = ScrollController();

  static const double _imgNormalHeight = 430;

  double _imgChangeHeight = _imgNormalHeight;
  double _navHeight = ScreenUtil.navigationBarHeight;
  double _scrollMinOffSet = 0;

  AppBarWidget appBar;

  @override
  void initState() {
    super.initState();
    _scrollMinOffSet = _imgNormalHeight - _navHeight;
    _addListener();
    appBar = AppBarWidget();
  }

  void _addListener() {
    _scrollController.addListener(() {
      double offset = _scrollController.offset;
      // 向下滑是负的，
      if (offset < _scrollMinOffSet) {
        setState(() {
          _imgChangeHeight = _imgNormalHeight - offset;
        });
      } else {
        setState(() {
          // _imgChangeHeight = _navHeight;
          _imgChangeHeight = 0;
        });
      }
//      //小于0 ，下拉放大
//      if (_y < 0) {
//      } else {}

      //appbar 透明度
      double appBarOpacity = offset / _navHeight;
      if (appBarOpacity < 0) {
        appBarOpacity = 0.0;
      } else if (appBarOpacity > 1) {
        appBarOpacity = 1.0;
      }

      ///更新透明度
      if (appBar?.updateAppBarOpacity != null) {
        appBar.updateAppBarOpacity(appBarOpacity);
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: _body());
  }

  Widget _body() {
    return Container(
      color: Color(0xFFF7F7F7),
      child: Stack(children: <Widget>[
        Positioned(
          top: 0,
          width: ScreenUtil.screenWidth,
          height: _imgChangeHeight,
          child: Container(
              color: Colors.white,
              child: Image.network(
                'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
                fit: BoxFit.cover,
              )),
        ),
        Container(
          child: MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: ListView(
                controller: _scrollController,
                physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
                children: <Widget>[
                  /// 占位
                  SizedBox(
                    width: double.infinity,
                    height: _imgNormalHeight - 80,
                  ),
                  Container(
                    height: 300,
                    color: Colors.white,
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    height: 1000,
                    color: Colors.white,
                  ),
                  SizedBox(
                    height: 20,
                  ),
                ],
              ),
            ),
          ),
        ),
        appBar,
      ]),
    );
  }
}

// ignore: must_be_immutable
class AppBarWidget extends StatefulWidget {
  Function updateAppBarOpacity;

  @override
  State<StatefulWidget> createState() => AppBarState();
}

class AppBarState extends State<AppBarWidget> {
  double opacity = 0;

  @override
  void initState() {
    if (widget != null) {
      widget.updateAppBarOpacity = (double op) {
        setState(() {
          opacity = op;
        });
      };
    }

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // 根据透明度，更改颜色，直接设置透明度变化会导致titlebar的按钮也看不见了
    return SizedBox(
      height: ScreenUtil.navigationBarHeight,
      child: Stack(
        children: <Widget>[
          Opacity(
            opacity: opacity,
            child: Container(
              color: Colors.deepOrange,
            ),
          ),
          Icon(Icons.arrow_back).align(Alignment.centerLeft)
        ],
      ),
    );
  }
}
